<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    输入框:<input type="text" id="inputValue" /> 密码:<input
      type="password"
      id="inputPassword"
    />
    <button id="sendajax">确定</button>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <!-- <script>
      $(function () {
        $("#sendajax").click(() => {
          let value = $("#inputValue").val();
          let password = $("#inputPassword").val();
          console.log(value, password);
          $.ajax({
            type: "post",
            url: "http://localhost:3000/",
            data: { value, password },
            contentType: "application/json; charset=utf-8",
            success: function (res) {
              console.log(res);
            },
          });
        });
      });
    </script> -->

    <script>
      let sendajax = document.querySelector("#sendajax");
      let username = document.querySelector("#inputValue");
      let password = document.querySelector("#inputPassword");

      sendajax.onclick = function () {
        let json = {
          username: username.value,
          password: password.value,
        };
        fetch("http://localhost:3000/", {
          method: "post",
          mode: "cors",
          headers: new Headers({
            "content-type": "application/json",
          }),
          body: JSON.stringify(json),
        });
        console.log(json);
      };
    </script>
  </body>
</html>
